$(function () {
  const url = [
    "../html/template/suv-nav1.html",
    "../html/template/suv-nav2.html",
    "../html/template/suv-nav3.html",
    "../html/template/suv-nav4.html",
    "../html/template/suv-nav5.html",
    "../html/template/suv-nav6.html",
    "../html/template/suv-nav7.html",
  ];
  $(".list1>.item").on("mouseover", function () {
    let index = $(".list1>.item").index(this);

    $(".nav-list").load(url[index], function () {});

    $(".nav-list").animate(
      {
        height: "229px",
      },
      200
    );
  });

  $(".list1").on("mouseleave", function () {
    $(".nav-list").animate(
      {
        height: "0px",
      },
      200
    );
  });

  $(".nl,.empty").on("mouseover", function () {
    $(".nav-list").animate(
      {
        height: "0px",
      },
      200
    );
  });
});

// banner-nav
$(function () {
  const url = [
    "../html/template/sub1.html",
    "../html/template/sub2.html",
    "../html/template/sub3.html",
    "../html/template/sub4.html",
    "../html/template/sub5.html",
    "../html/template/sub6.html",
    "../html/template/sub7.html",
    "../html/template/sub8.html",
    "../html/template/sub9.html",
    "../html/template/sub10.html",
  ];
  $(".lt-text>.sub").on("mouseover", function () {
    for (var index = 0; index < $(".lt-text").length; index++) {
      let index = $(".lt-text>.sub").index(this);
      $(".sub-content").load(url[index], function () {});

      $(".sub-content").css("display", "block");

      $(".sub-content").on("mouseover", function () {
        $(".sub-content").css("display", "block");
      });
      $(".sub-content").on("mouseleave", function () {
        $(".sub-content").css("display", "none");
      });

      $(".sub").on("mouseleave", function () {
        $(".sub-content").css("display", "none");
      });
    }
  });
});

// 悬浮窗效果
$(function () {
  let back = $(".fix-box .backtop");
  $(window).on("scroll", function () {
    if ($(this).scrollTop() >= 500) {
      back.css("display", "flex");
    } else {
      back.css("display", "none");
    }
  });
});

// 数据渲染
$(function () {
  $.ajax({
    url: "../../interface/getitems.php",
    typeof: "",
    dataType: "json",
  })
    .then((res) => {
      let template = "";

      res.forEach((element) => {
        let pic = JSON.parse(element.picture);

        template += `<li>
                          <a href="../html/item.html?id=${element.ID}">
                            <div class="img">
                            <img src="../${pic[0].src}" alt="" />
                            </div>
                            <h3 class="title">${element.title}</h3>
                            <p class="desc">${element.des}</p>
                            <p class="price">
                              <span class="num">${element.price}</span>
                              元
                              <span>起</span>
                            </p>
                          </a>
                        </li>`;
      });
      $(".list4").html(template);
    })
    .catch((xhr) => {});
});
